import React, { Component } from 'react';
import { Button, Space } from 'antd-mobile';
import { AppOutline, LeftOutline } from 'antd-mobile-icons';
import PropTypes from 'prop-types';
import styles from './NotFound.module.less';

class NotFound extends Component {
  static propTypes = {
    // 可以添加props验证
  };

  handleGoHome = () => {
    window.location.href = '/';
  };

  handleGoBack = () => {
    window.history.back();
  };

  render() {
    return (
      <div className={styles.container}>
        <div className={styles.content}>
          <div className={styles.icon}>
            <AppOutline style={{ fontSize: '120px', color: '#ccc' }} />
          </div>
          
          <h1 className={styles.title}>404</h1>
          <h2 className={styles.subtitle}>页面不存在</h2>
          <p className={styles.description}>
            抱歉，您访问的页面不存在或已被删除
          </p>
          
          <div className={styles.actions}>
            <Space direction="vertical" style={{ width: '100%' }}>
              <Button 
                color="primary" 
                size="large" 
                block
                onClick={this.handleGoHome}
              >
                返回首页
              </Button>
              <Button 
                size="large" 
                block
                onClick={this.handleGoBack}
              >
                <LeftOutline style={{ marginRight: '8px' }} />
                返回上页
              </Button>
            </Space>
          </div>
        </div>
      </div>
    );
  }
}

export default NotFound;
